<template>
  <PageWrapper title="总提纲">
    <div id="map"></div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import MindElixir from 'mind-elixir';
  import example from 'mind-elixir/example';
  import { PageWrapper } from '@/components/Page';
  import { getInterviewQCategoriesApi } from '@/api/interviewQ/interviewQCategories';
  import { getInterviewQApi } from '@/api/interviewQ/interviewQ';
  import { get } from 'lodash-es';

  const me = ref();
  onMounted(async () => {
    me.value = new MindElixir({
      el: '#map',
      direction: MindElixir.RIGHT,
    });
    console.log('🚀 ~ example:', example);
    const categories: any[] = await new Promise((resolve) => {
      getInterviewQCategoriesApi().then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            children: [],
            expanded: false,
            id: item.id,
            parent: 'my-root',
            topic: item.name,
          });
        });
        resolve(array);
      });
    });

    const questions: any[] = await new Promise((resolve) => {
      getInterviewQApi().then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            children: [],
            expanded: false,
            id: item.id,
            parent: item.category_id,
            topic: item.question,
          });
        });
        resolve(array);
      });
    });

    categories.map((item) => {
      questions.map((i) => {
        if (i.parent === item.id) {
          item.children.push(i);
        }
      });
    });

    const myData = {
      linkData: {},
      nodeData: {
        children: categories,
        expanded: true,
        id: 'my-root',
        parent: undefined,
        root: true,
        topic: '总提纲',
      },
    };
    console.log('🚀 ~ onMounted ~ myData:', myData);
    me.value.init(myData);
  });
</script>

<style lang="less" scoped>
  #map {
    width: 100%;
    height: 1000px;
  }
</style>
